<template>
  <div>
    <h2 style="text-align: center">通过wow.js实现滚动效果</h2>
    <div
      class="wow bounceInLeft box1"
      data-wow-duration="2s"
      data-wow-delay="1s"
    >
    11111</div>
   <div
      class="wow bounceInDown box2"
      data-wow-duration="1s"
    >22222</div>

    <div class="box3 wow bounceInUp">
        33333
    </div>
    <div
      class="wow bounceInUp box1"
      data-wow-duration="1s"
      data-wow-delay="1s"
    >4444</div>
    <div
      class="wow flash box1"
      data-wow-duration="1s"
      data-wow-delay="1s"
    >
    5555</div>
  </div>
</template>

<script>
import { WOW } from "wowjs";
export default {
  data() {
    return {};
  },
  created() {},
  mounted() {
    const wow = new WOW({ live: false, scrollContainer: '.el-scrollbar__wrap' })
    wow.init();
    //自定义配置
    // var wow = new WOW({
    //   boxClass: "wow",
    //   animateClass: "animated",
    //   offset: 0,
    //   mobile: true,
    //   live: true,
    // });
    // wow.init();
  },
  methods: {},
};
</script>

<style scoped>
.box1{
    width: 200px;
    height: 200px;
    background: rgb(26, 212, 63);
    margin: 200px;
}
.box2{
    width: 200px;
    height: 200px;
    background: rgb(118, 16, 191);
    margin: 200px;
}
.box3{
    width: 200px;
    height: 200px;
    background: rgb(118, 16, 191);
    margin: 200px;
}
</style>